<script type="text/ecmascript-6">
import Chart from 'echarts'
import {ElButton} from 'element-ui';
var getData = require("../../../json/map/china.json");
import chapterapi from "@/api/chapter.js"
import charts from "@/api/charts.js"

export default {
  name: "welcome",
  data() {
    return {
      ws: null,
      machineNo: '',
      type: 'day',
      like: true,
      value1: 4154.564,
      value2: 2222,
      title: '今年的增长',
      //  销售总笔数
      SCEoption: {
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}月 : {c}"
        },
        legend: {
          data: [{
            name: '销售总笔数',
            icon: 'rect'
          }],
          top: 1,
          left: 1,
          itemGap: 10,
          itemWidth: 12,
          itemHeight: 12,
          textStyle: {
            fontSize: 12,
            color: "#323232"
          }
        },
        grid: {
          left: 50,
          right: 10,
          top: 30,
          bottom: 30,
          borderWidth: 1
        },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,
            height: 70,
            interval: 0,
            textStyle: {
              fontSize: 10,
              color: "#999999"
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,
            textStyle: {
              fontSize: 10,
              color: "#999999"
            }
          }
        },
        series: [{
          name: '销售总笔数',
          type: 'bar',
          barGap: 0,
          data: null,
          barWidth: 10,
          itemStyle: {
            normal: {
              color: new Chart.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  {offset: 0, color: '#83bff6'},
                  {offset: 0.5, color: '#188df0'},
                  {offset: 1, color: '#188df0'}
                ]
              )
            },
            emphasis: {
              color: new Chart.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  {offset: 0, color: '#2378f7'},
                  {offset: 0.7, color: '#2378f7'},
                  {offset: 1, color: '#83bff6'}
                ]
              )
            }
          }
        }]
      },
      //  销售总金额
      SUMoption: {
        geo:{
          type:'map',
          map:'chinaMap', // chinaMap需要和registerMap中的第一个参数保持一致
          roam: true, //地图的拖动，鼠标滑动缩放
          zoom:1.2, //设置初始地图的缩放比例
        },
        series:[
          {
            data: null, // 配置散点的坐标数据
            type: 'effectScatter',
            coordinateSystem: 'geo',// 指明散点使用的坐标系统 geo的坐标系统
            rippleEffect: {
              scale:3
            },
            label: {
              normal: {
                formatter: function(params){
                  return params.data.count+'人'
                },
                color:'blue',
                position: 'right',
                show: false
              },
              emphasis: {
                show: true
              }
            }
          }
        ],
      },
      //  销售总金额
      Clickoption: {
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}月 : {c}"
        },
        legend: {
          data: [{
            name: '销售总金额',
            icon: 'rect'
          }],
          top: 1,
          left: 1,
          itemGap: 10,
          itemWidth: 12,
          itemHeight: 12,
          textStyle: {
            fontSize: 12,
            color: "#323232"
          }
        },
        grid: {
          left: 50,
          right: 10,
          top: 30,
          bottom: 30,
          borderWidth: 1
        },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,
            height: 70,
            interval: 0,
            textStyle: {
              fontSize: 10,
              color: "#999999"
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,
            textStyle: {
              fontSize: 10,
              color: "#999999"
            }
          }
        },
        series: [{
          name: '销售总金额',
          type: 'line',
          barGap: 0,
          data: null,
          barWidth: 10,
          itemStyle: {
            color: "#108ff9"
          }
        }]
      },
      //  支付方式统计
      payoption: {
        backgroundColor: '#2c343c',
        title: {
          text: '用户分类统计',
          left: 10,
          top: 5,
          textStyle: {
            fontSize: 12,
            color: '#ccc'
          }
        },

        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },

        // visualMap: {
        //   show: false,
        //   min: 80,
        //   max: 600,
        //   inRange: {
        //     colorLightness: [0, 1]
        //   }
        // },
        series: [
          {
            name: '用户分类统计',
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],
            data: null,
            roseType: 'radius',
            label: {
              normal: {
                textStyle: {
                  color: 'rgba(255, 255, 255, 0.3)'
                }
              }
            },
            labelLine: {
              normal: {
                lineStyle: {
                  color: 'rgba(255, 255, 255, 0.3)'
                },
                smooth: 0.2,
                length: 10,
                length2: 20
              }
            },
            itemStyle: {
              normal: {
                shadowBlur: 200,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },

            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
              return Math.random() * 200;
            }
          }
        ]
      },
      payNumoption: {
        backgroundColor: '#2c343c',
        title: {
          text: '用户分类统计',
          left: 10,
          top: 5,
          textStyle: {
            fontSize: 12,
            color: '#ccc'
          }
        },

        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        series: [
          {
            name: '用户分类统计',
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],
            data: null,
            roseType: 'radius',
            label: {
              normal: {
                textStyle: {
                  color: 'rgba(255, 255, 255, 0.3)'
                }
              }
            },
            labelLine: {
              normal: {
                lineStyle: {
                  color: 'rgba(255, 255, 255, 0.3)'
                },
                smooth: 0.2,
                length: 10,
                length2: 20
              }
            },
            itemStyle: {
              normal: {
                shadowBlur: 200,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },

            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
              return Math.random() * 200;
            }
          }
        ]
      }
    }
  },
  // 导入组件
  components: {
    // 点聚合组件
  },
  // 创建完毕状态(里面是操作)
  created() {

  },
  // 挂载结束状态(里面是操作)
  mounted() {
    this.getData()
    this.getSCE()
    this.getSUM()
    this.getClick()
    this.getpay()
    this.getpayNum()
  },
  // 里面的函数只有调用才会执行
  methods: {

    toggleFullscreen() {
      const elem = this.$refs.visualization;

      if (elem.requestFullscreen) {
        elem.requestFullscreen();
      } else if (elem.mozRequestFullScreen) { // Firefox
        elem.mozRequestFullScreen();
      } else if (elem.webkitRequestFullscreen) { // Chrome, Safari and Opera
        elem.webkitRequestFullscreen();
      } else if (elem.msRequestFullscreen) { // IE/Edge
        elem.msRequestFullscreen();
      }
    },
    // 交易总笔数
    getSCE() {
      this.chart = Chart.init(this.$refs.SCEchart)
      this.chart.setOption(this.SCEoption)
    },
    // 交易总金额
    getSUM() {
      this.chart = Chart.init(this.$refs.SUMEchart)
      Chart.registerMap('chinaMap',getData)
      this.chart.setOption(this.SUMoption)

    },
    // 总点击量
    getClick() {
      this.chart = Chart.init(this.$refs.ClickEchart)
      this.chart.setOption(this.Clickoption)
    },
    // 支付方式统计
    getpay() {
      this.chart = Chart.init(this.$refs.payEchart)
      this.chart.setOption(this.payoption)
    },
    // 支付方式统计
    getpayNum() {
      this.chart = Chart.init(this.$refs.payNumEchart)
      this.chart.setOption(this.payNumoption)
    },
    //获取webSocket对象
    getData () {
      charts.userTypePercent().then( req => {
        this.payoption.series[0].data = req.data;
        this.getpay()
      })
      charts.userMap().then(req => {
        this.SUMoption.series[0].data = req.data
        this.getSUM()
      })
      charts.courseTypePercent().then(req => {
        this.payNumoption.series[0].data = req.data
        this.getpayNum()
      })
      charts.courseSale().then(req => {
        this.SCEoption.series[0].data = req.data
        console.log(req.data)
        this.getSCE()
        console.log(req)
      })
      charts.courseSales().then(req => {
        this.Clickoption.series[0].data = req.data
        this.getClick()
      })
    }


  }
};
</script>


<style scoped>

#map{
  width: 600px;
  height: 400px;
  margin-top: -40px;
  right: 20px;
}

.stbox {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.text-c {
  text-align: center;
  height: 250px;
}

.header {
  margin-top: 25px;
}

.st-gbox {
  background-color: #fff;
  border-radius: 5px;
  height: 250px;
  box-sizing: border-box;

}

.cavasbox {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

.paybox {
  width: 300px;
  background-color: #fff;
  box-sizing: border-box;
  border-radius: 5px;
  margin-top: 20px;
  //height: 32vh;
  height: 300px;
}

.visualization {
  /* 样式设置用于填充全屏 */
  width: 100%;
  height: 100vh; /* 设置高度为视口高度 */
  background-color: #fff;

}

.allbutton_left {

  position: absolute;
  top: 60px;
  right: 20px;
  margin: 20px;
}


</style>


<template>
  <div>
    <i class="el-icon-full-screen fullscreen-button allbutton_left" @click="toggleFullscreen"></i>
    <!--    <button @click="toggleFullscreen" class="allbutton_left" >全屏显示</button>-->
    <!--    <el-button @click="toggleFullscreen" class="fullscreen-button" type="primary">全屏显示</el-button>-->
    <div ref="visualization" class="visualization">
      <!-- 数据可视化内容 -->


      <div class="stbox">
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>数据可视化</el-breadcrumb-item>
        </el-breadcrumb>

        <el-row>
          <el-col span= 6 style="margin-top: -10px;">
            <div class="paybox">
              <div class="cavasbox" ref="payEchart"></div>
            </div>
          </el-col>
          <el-col span= 12>
            <div class="st-gbox" id = 'box'>
              <div class="cavasbox" id = 'map' ref="SUMEchart"></div>
            </div>
          </el-col>
          <el-col span= 6 style="margin-top: -10px;">
            <div class="paybox">
              <div class="cavasbox" ref="payNumEchart"></div>
            </div>
          </el-col>
        </el-row>
        <!-- 统计图 -->
        <div>
          <el-row :gutter= 24 style="margin-top: 50px">
            <el-col :span= 12 class="text-c">
              <div class="st-gbox">
                <div class="cavasbox" ref="SCEchart"></div>
              </div>
            </el-col>
            <el-col :span= 12 class="text-c">
              <div class="st-gbox">
                <div class="cavasbox" ref="ClickEchart"></div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>

</template>


